<template>
  <div class="container">
    <uni-nav-bar
      :border="false"
      backgroundColor="transparent"
      statusBar
      title="消息"
      fixed
    />
    <!-- <button @click="showNotification">显示通知</button>
    <notify ref="notification" /> -->
    <div class="navs flexcen rela">
      <div
        style="transition: all 0.3s"
        class="navbg abso"
        :style="{ left: nav[active].left + 'rpx', top: 24 + 'rpx', zIndex: -1 }"
      ></div>
      <div
        :class="[active == index ? 'navactive' : 'nav']"
        v-for="(item, index) in nav"
        :key="index"
        @click="active = index"
      >
        {{ item.lable }}
      </div>
    </div>
    <scroll-view
      v-if="list.length > 0"
      :style="{ height: h }"
      @scrolltolower="lowerBottom"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="100"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
    >
      <view v-for="(item, index) in list" :key="index">
        <van-swipe-cell right-width="65" @click="read(item, index)">
          <div class="message flexcolcenter">
            <div class="rela message_icon">
              <div class="abso notRead" v-if="item.readStatus == 0"></div>
              <image
                class="message_icon"
                src="@/static/images/message/icon3.png"
              ></image>
            </div>

            <div class="message_info">
              <div class="flex message_info_title_time">
                <div
                  :class="[
                    'message_info_title',
                    item.importantFlag == 1 ? 'message_info_title_red' : '',
                  ]"
                >
                  {{ item.title }}
                </div>
                <div class="time">
                  {{ parseTime(item.createTime) }}
                </div>
              </div>
              <div class="message_info_txt">
                {{ item.content }}
              </div>
            </div>
          </div>

          <view
            class="delete flexcolcenter flexcen"
            slot="right"
            @click="onClose(index)"
          >
            <div>删除</div>
          </view>
        </van-swipe-cell>
      </view>
      <div class="more">{{ canLoading ? "加载更多" : "到底了~" }}</div>
    </scroll-view>
    <div v-else :style="{ height: h }">
      <div style="width: 100%; height: 50px"></div>
      <van-empty description="暂无消息" />
    </div>
    <!-- 补考弹窗 -->
    <makeupDia :open.sync="makeupDia_open" :keyId="makeupDia_id"></makeupDia>
  </div>
</template>

<script>
// import notify from "./notify";
import makeupDia from "./components/makeupDia";
import {
  listPost_message,
  readpost,
  getExamPaperInfoById,
  getExamApplyInfoById,
  examInfo,
} from "@/common/api/message";
import { parseTime } from "@/common/utils";
export default {
  components: {
    makeupDia,
  },
  data() {
    return {
      // 补考
      makeupDia_open: false,
      makeupDia_id: "",
      //
      parseTime: function (time) {
        return parseTime(time);
      },
      active: 0,
      safeAreaInsetsTop: "",
      navigationBarHeight: "",
      h: "",
      nav: [
        {
          lable: "全部",
          type: "",
          left: 18,
        },
        {
          lable: "学习消息",
          type: "9,10,12",
          left: 196,
        },
        {
          lable: "授课消息",
          type: "0,1,11",
          left: 376,
        },
        {
          lable: "抽查消息",
          type: "8,14",
          left: 556,
        },
      ],
      triggered: true,
      _freshing: false,
      canLoading: false,
      list: [],
      pageModel: {
        msgTypes: "",
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  onLoad() {},
  onShow() {
    this.active = 0;
    this.getList("refresh");
    this.safeAreaInsetsTop = getApp().globalData.$safeAreaInsetsTop;
    this.navigationBarHeight = getApp().globalData.$navigationBarHeight;
    this.h = `calc(100vh - ${this.navigationBarHeight}rpx - 120rpx - ${this.safeAreaInsetsTop}px)`;
  },
  watch: {
    // tab切换
    active: {
      handler(newVal, oldVal) {
        this.pageModel.msgTypes = this.nav[newVal].type;
        this.getList("refresh");
      },
    },
  },
  methods: {
    showNotification() {
      // i等于1-100随机数
      let i = Math.floor(Math.random() * 100) + 1;
      this.$refs.notification.addNewMessage("这是" + i + "条新消息");
    },
    /* 信息点击 */
    async read(item, index) {
      // 消息类型 0.批改 1.教师处理补考申请 2.答疑 3.学生评价 4.预警 5.系统消息 6.教师评价 7.问卷调查,
      // 8.考核抽查,9.学生课程消息,10.学生试卷消息,11.训练员授课消息，12.学生

      if (item.msgType == 11) {
        /*11. 您有一门新的课程待授课，点击消息查看课程！ 跳转到课程详情页面 */
        let readStatus = await readpost(item.id);
        item.readStatus = 1;
        uni.navigateTo({
          url: `/pages/selectiCourse/courseDetail?courseId=${item.courseId}&orderCourseId=${item.keyId}&type=teaching`,
        });
      } else if (item.msgType == 10 || item.msgType == 14) {
        /*10. 考试未通过/考试通过 跳转到考试结果页面 */
        /*11. 抽查未通过/抽查通过 跳转到考试结果页面 */
        let readStatus = await readpost(item.id);
        item.readStatus = 1;
        let res10 = await getExamPaperInfoById(item.keyId);
        const { courseStuId, examId, id, taskName, taskId, title } = res10.data;
        if (item.msgType == 10) {
          uni.navigateTo({
            url: `/pages/selectiCourse/examResult?courseStuId=${courseStuId}&id=${examId}&paperId=${id}&taskId=${taskId}&type=onlineExam&taskName=${
              taskName || title
            }`,
          });
        } else {
          uni.navigateTo({
            url: `/pages/selectiCourse/examResult?courseStuId=${courseStuId}&id=${examId}&paperId=${id}&taskId=${taskId}&type=testCheck&taskName=${
              taskName || title
            }`,
          });
        }
      } else if (item.msgType == 0) {
        /*0. 通知教师去批改  直接去考试页面 */
        let readStatus = await readpost(item.id);
        item.readStatus = 1;
        let res0 = await getExamPaperInfoById(item.keyId);
        const { courseStuId, examId, id, taskName, taskId } = res0.data;
        uni.navigateTo({
          url: `/pages/selectiCourse/exam?courseStuId=${courseStuId}&id=${examId}&paperId=${id}&taskId=${taskId}&type=onlineExam&status=correct&taskName=${taskName}`,
        });
      } else if (item.msgType == 1) {
        /*1.补考申请 打开补考弹框 */
        let readStatus = await readpost(item.id);
        item.readStatus = 1;
        this.makeupDia_open = true;
        this.makeupDia_id = item.keyId;
      } else if (item.msgType == 12 || item.msgType == 8) {
        /*8.你有新的考核抽查 直接去考试开始页面*/
        /*12.补考申请 已通过 点击消息去补考 直接去考试开始页面*/
        let readStatus = await readpost(item.id);
        item.readStatus = 1;
        let res;
        if (item.msgType == 12) {
          res = await getExamApplyInfoById(item.keyId);
          const {
            auditStatus,
            examId,
            courseStuId,
            taskName,
            taskId,
            orderCourseId,
          } = res.data;
          // 直接去考试开始页面
          uni.navigateTo({
            url: `/pages/selectiCourse/startExam?courseStuId=${courseStuId}&examId=${examId}&taskId=${taskId}&orderCourseId=${orderCourseId}&type=onlineExam&taskName=${taskName}`,
          });
        } else {
          res = await examInfo(item.keyId);
          uni.navigateTo({
            url: `/pages/selectiCourse/startExam?examId=${item.keyId}&type=testCheck&taskName=${res.data.title}`,
          });
        }
        // examInfo
      } else if (item.msgType == 13) {
        /*13.补考申请 未通过,课程重新学习 直接到课课程详情页面开始学习*/
        let readStatus = await readpost(item.id);
        item.readStatus = 1;
        // 直接去课程详情页面 keyid此时为ordercourseid
        uni.navigateTo({
          url: `/pages/selectiCourse/courseDetail?orderCourseId=${item.keyId}&type=study`,
        });
      }
    },
    async getList(type) {
      if (type == "refresh") {
        uni.showLoading({
          mask: true,
          title: "加载中",
        });
        this.pageModel.pageNum = 1;
      }
      let res = await listPost_message(this.pageModel);
      this.list = type == "refresh" ? res.rows : [...this.list, ...res.rows];
      this.canLoading = this.list.length < res.total ? true : false;
    },
    lowerBottom() {
      if (this.canLoading) {
        this.pageModel.pageNum = this.pageModel.pageNum + 1;
        this.getList();
      }
    },
    onPulling(e) {
      console.log("onpulling", e);
    },
    async onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      await this.getList("refresh");
      this.triggered = false;
      this._freshing = false;
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
      console.log("onRestore");
    },
    onAbort() {
      console.log("onAbort");
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .van-swipe-cell__left,
.van-swipe-cell__right {
  height: 100%;
  width: 65px;
}

.delete {
  height: 100%;
  width: 65px;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  background-color: #ee0a24;
  color: #fff;
}

.notRead {
  width: 14rpx;
  border-radius: 50%;
  height: 14rpx;
  background: red;
  top: 10rpx;
  right: 10rpx;
}

.more {
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}

// /deep/ .van-overlay {
// 	background-color: rgba(0, 0, 0, .3) !important;
// }

.container {
  width: 750rpx;
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/msgbg.png");
  background-size: 100% auto;
}

.mine_bg_img {
  width: 750rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.msg_bg_img {
  width: 750rpx;
}

.message {
  margin-bottom: 20rpx;
  padding: 20rpx 32rpx 20rpx 20rpx;

  .message_icon {
    width: 112rpx;
    height: 112rpx;
  }

  .message_info {
    padding: 12rpx 0 2rpx 12rpx;

    .message_info_title_time {
      .message_info_title_red {
        color: #ff4d03 !important;
      }
      .message_info_title {
        width: 420rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 44rpx;
      }

      .time {
        margin-left: 10rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 44rpx;
      }
    }

    .message_info_txt {
      margin-top: 14rpx;
      width: 564rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 40rpx;
    }
  }
}

.navs {
  z-index: 2;
  padding: 24rpx 0 32rpx 0;

  .navbg {
    width: 180rpx;
    height: 64rpx;
    background: #ff4d03;
    border-radius: 32px;
  }

  .nav {
    width: 180rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-radius: 32px;
  }

  .navactive {
    width: 180rpx;
    text-align: center;
    height: 64rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 64rpx;
    // background: #ff4d03;
    border-radius: 32px;
  }
}
</style>